<template>
    <div>
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="search">
                <el-form-item label="bom名称" >
                    <el-input placeholder="请输入bom名称" v-model="search.bomName" class="inputSuffix"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称">
                    <el-autocomplete  class="inputSuffix"  v-model="search.supplierName" :fetch-suggestions="searchAsyncSupplier" placeholder="请输入供应商名称" @select="changeSupplier"></el-autocomplete>
                </el-form-item>
                <el-button type="primary" @click="searchBtn" icon="el-icon-search">查询</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
        <!-- 搜索 -->
        <!-- 表格 -->
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable  min-width="40"></el-table-column>
            <el-table-column prop="name" label="名称"  sortable min-width="100"></el-table-column>
            <el-table-column prop="code" label="编码"  sortable show-overflow-tooltip min-width="160"></el-table-column>
            <el-table-column prop="type" label="型号" sortable min-width="85"></el-table-column>
            <el-table-column prop="texture" label="材质" sortable  min-width="120"></el-table-column>
            <el-table-column prop="no" label="损耗系数" sortable  min-width="90"></el-table-column>
            <el-table-column prop="managerLevel" label="管理等级"  sortable min-width="90"></el-table-column>
            <el-table-column prop="enable" label="是否启用" sortable  min-width="90">
                <template slot-scope="scope">
                    <div v-if="scope.row.enable===0">否</div>
                    <div v-if="scope.row.enable===1">是</div>
                </template>
            </el-table-column>
            <el-table-column prop="creatorName" label="创建人"  sortable min-width="90"></el-table-column>
             <el-table-column prop="createTime" label="创建时间" sortable  min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog(scope.row)" type="text" size="mini">关联供应商</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->

        <el-dialog :title="dialog.title" width="1000px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-button type="success" @click="isShowDialog1('insert')" icon="el-icon-plus">新增</el-button>
            <el-table :data="dialog.supplierList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :max-height="tableHeight"
        :header-cell-style="getRowClass" >
                <el-table-column fixed type="index" label="*"  min-width="40" align="center"></el-table-column>
                <el-table-column prop="supplierName" label="供应商名字" show-overflow-tooltip  min-width="120" align="center"></el-table-column>
                <el-table-column prop="minPurchase" label="最小采购量"   min-width="80" align="center"></el-table-column>
                <el-table-column prop="predate" label="采购提前期"  min-width="80" align="center"></el-table-column>
                <el-table-column prop="startNums" label=" 起初数" show-overflow-tooltip   min-width="80" align="center"></el-table-column>
                <el-table-column prop="price" label="单价"  min-width="100" align="center"></el-table-column>
                <el-table-column prop="type" label="采购类型"  min-width="100" align="center">
                    <template slot-scope="scope">
                       <div v-if="scope.row.type===1">月采购</div>
                        <div v-if="scope.row.type===2">年采购</div>
                    </template>
                </el-table-column>
                <el-table-column prop="creatorName" label="创建人"  min-width="100" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"  min-width="100" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button @click="isShowDialog1('update',scope.row)" type="text" size="mini">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog :title="dialog1.title" width="750px" center :visible.sync="dialog1.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :style="tableDialogHeightTabPane">
            <el-form :inline="true" class="demo-form-inline" v-model="dialog1.fromData" label-position="right" label-width="120px">
                <el-form-item label="物料名称" ><el-input v-model="dialog.materiel.name" disabled></el-input></el-form-item>
                <el-form-item label="物料型号" ><el-input v-model="dialog.materiel.type" disabled></el-input></el-form-item>
                <el-form-item label="供应商名称">
                    <el-autocomplete  class="autocomplete-row" v-model="dialog1.fromData.supplierName" :fetch-suggestions="querySearchAsync" placeholder="请输入供应商名称" @select="handleSelect"></el-autocomplete>
                </el-form-item>
                <el-form-item label="采购提前期">
                    <el-input v-model="dialog1.fromData.predate" class="inputSuffix">
                        <el-button slot="append">天</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="最小采购量"><el-input v-model="dialog1.fromData.minPurchase" ></el-input></el-form-item>
                <el-form-item label="单价">
                    <el-input v-model="dialog1.fromData.price" class="inputSuffix"><el-button slot="append">元</el-button></el-input>
                </el-form-item>
                <el-form-item label="起初数"><el-input v-model="dialog1.fromData.startNums" ></el-input></el-form-item>
                <el-form-item label="采购类型">
                    <el-select v-model="dialog1.fromData.type" placeholder="采购类型">
                        <el-option
                        v-for="item in purchaseType"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建人" v-if="dialog1.title==='修改供应商列表'"><el-input v-model="dialog1.fromData.creatorName" disabled></el-input></el-form-item>
                <el-form-item label="创建时间" v-if="dialog1.title==='修改供应商列表'"><el-input v-model="dialog1.fromData.createTime" disabled></el-input></el-form-item>
            </el-form>
                </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    data(){
        return {
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            supplierAll:[],/**所有供应商 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            search:{
                bomName:'',
                supplierName:'',
                supplier:''
            },
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                isShow:false,
                materiel:'',
                supplierList:[]
            },
            dialog1:{
                title:'',
                isShow:false,
                fromData:{}
            },
            purchaseType:[{
                value:1,
                name:'月采购'
            },{
                value:2,
                name:'年采购'
            }],
        }
    },
    created(){
        let  self = this;
        self.getSupplierAllList();/**获取所有供应商列表 */
        self.getTableList();
    },
    methods:{
        getTableList(){
            let self = this,
            data={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                name:self.search.bomName,
                supplier:self.search.supplierName===''?'': self.search.supplier,
                type:3

            }
            cgbHttp.cgMaterialList(data).then(res=>{
                self.tabaleData=res.content.records
                self.pagination.total = res.content.total;
            })
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        isShowDialog(row){
            let self = this;
            self.dialog.title = `${row.name}关联供应商列表`;
            self.dialog.isShow = true;
            self.dialog.materiel = row;
            self.dialog.supplierList=[];
            self.getSupplierList(row.id);
        },
        getSupplierList(id){
            let self = this;
            cgbHttp.getSupplierList( self.dialog.materiel.id).then(res=>{
                self.dialog.supplierList= res.content;
            })
        },
        getSupplierAllList(){
            let self = this;
            cgbHttp.supplierAllList().then(res=>{
                 res.content.forEach(element => {
                   element.value = element.name;
                });
                self.supplierAll= res.content;
            })
        },
        querySearchAsync(queryString, callback){
            let results = queryString ?  this.supplierAll.filter(this.createStateFilter(queryString)) : this.supplierAll;
            callback(results);
        },
        handleSelect(item){
            this.dialog1.fromData.sid = item.id;
            this.dialog1.fromData.supplierName = item.value;
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !==-1);
            };
        },
        isShowDialog1(type,row){
            let self = this;
            self.dialog1.title = type==='insert'?'新增供应商列表':'修改供应商列表';
            self.dialog1.isShow = true;
            self.dialog1.fromData = type==='insert'?{
                type:1
            }:row;
        },
        submitList(){
            let self = this;
            let type = self.dialog1.title.indexOf('新增')>-1?'insert':'update';
            let data={
                id:self.dialog1.fromData.id,
                bid:self.dialog.materiel.id,
                sid:self.dialog1.fromData.sid,
                minPurchase:self.dialog1.fromData.minPurchase,
                predate:self.dialog1.fromData.predate,
                startNums:self.dialog1.fromData.startNums,
                price:self.dialog1.fromData.price,
                type:self.dialog1.fromData.type
            }
            cgbHttp.addUpdateAboutSupplier(type,data).then(res=>{
               self.dialog1.isShow = false;
               self.getSupplierList();
               self.$message.success(`${self.dialog1.title}`)
            })
        },
        searchAsyncSupplier(queryString, callback){
            let results = queryString ?  this.supplierAll.filter(this.createStateFilter(queryString)) : this.supplierAll;
            callback(results);
        },
        changeSupplier(item){
            this.search.supplier = item.id;
            this.search.supplierName = item.value;
        },
    }
}
</script>
<style scoped>
</style>
